<template>
  <view>
    <u-popup :closeable="true" :show="show" @close="close" @open="opened">
      <u-tabs :list="[{ name: '企微客户' }, { name: '系统客户' }]" @click="clickTabs"></u-tabs>
      <view style="height: 60vh; padding: 0rpx 20rpx">
        <view style="height: 50vh; overflow: auto">
          <scroll-view
            v-show="entryType === '1'"
            enable-back-to-top
            scroll-y
            class="customer"
            :refresher-triggered="isTriggered"
            @scrolltolower="getCustomerData"
          >
            <u-radio-group
              v-model="customerId"
              iconPlacement="right"
              placement="column"
              :borderBottom="true"
            >
              <u-radio
                :customStyle="{ marginBottom: '8px' }"
                v-for="(item, index) in customerList"
                :key="index"
                :label="item.name"
                :name="item!.customerId"
                @change="changeCustomer"
              >
              </u-radio>
            </u-radio-group>
            <!-- 底部提示文字 -->
            <view class="loading-text">
              {{ isFinish ? '没有更多数据~' : '正在加载...' }}
            </view>
          </scroll-view>

          <scroll-view
            v-show="entryType === '2'"
            enable-back-to-top
            scroll-y
            class="customer"
            :refresher-triggered="isTriggered"
            @scrolltolower="getSysCustomerData"
          >
            <u-radio-group
              v-model="customerIdSys"
              iconPlacement="right"
              placement="column"
              :borderBottom="true"
            >
              <u-radio
                :customStyle="{ marginBottom: '8px' }"
                v-for="(item, index) in customerListSys"
                :key="index"
                :label="item.name"
                :name="item!.customerId"
                @change="changeCustomerSys"
              >
              </u-radio>
            </u-radio-group>
            <!-- 底部提示文字 -->
            <view class="loading-text">
              {{ isFinishSys ? '没有更多数据~' : '正在加载...' }}
            </view>
          </scroll-view>
        </view>
        <view style="position: fixed; bottom: 15rpx; width: 710rpx">
          <u-button @click="submitForm" type="primary">确 认</u-button>
        </view>
      </view>
    </u-popup>
  </view>
</template>
<script setup name="CusPicker" lang="ts">
import { onMounted, ref } from 'vue'
import { getCustomerListAPI } from '@/services/customer'

const emit = defineEmits(['update:labels', 'update:modelValue', 'change'])

// 接收页面参数
const props = defineProps<{
  modelValue: [Number]
  labels: any
}>()
const show = ref(false)
const customerId = ref<any>()
const customerIdSys = ref<any>()

// 基本案列数据
const customerList = ref<any[]>([])
const customerListSys = ref<any[]>([])

// 请求参数
const queryParams: Required<any> = {
  pageNum: 1,
  pageSize: 10,
}

const queryParamsSys: Required<any> = {
  pageNum: 1,
  pageSize: 10,
}

const entryType = ref('1')

const isLoading = ref(false)
// 是否分页结束
const isFinish = ref(false)
const isFinishSys = ref(false)
// 是否触发下拉刷新
const isTriggered = ref(false)

const clickTabs = async (e: any) => {
  entryType.value = e.index === 0 ? '1' : '2'
}
const getCustomerData = async () => {
  // 如果数据出于加载中，退出函数
  if (isLoading.value) return
  // 退出分页判断
  if (isFinish.value === true) {
    return
  }
  // 发送请求前，标记为加载中
  isLoading.value = true
  // 发送请求
  const res = await getCustomerListAPI({
    entryType: '1',
    ...queryParams,
  })
  // 发送请求后，重置标记
  isLoading.value = false
  // 数组追加
  customerList.value.push(...res.rows)
  // 分页条件
  if (customerList.value.length < res.total) {
    // 页码累加
    queryParams.pageNum++
  } else {
    // 分页已结束
    isFinish.value = true
  }
}

/*
系统客户
 */
const getSysCustomerData = async () => {
  // 如果数据出于加载中，退出函数
  if (isLoading.value) return
  // 退出分页判断
  if (isFinishSys.value === true) {
    return
  }
  // 发送请求前，标记为加载中
  isLoading.value = true
  // 发送请求
  const res = await getCustomerListAPI({
    entryType: '2',
    ...queryParamsSys,
  })
  // 发送请求后，重置标记
  isLoading.value = false
  // 数组追加
  customerListSys.value.push(...res.rows)
  // 分页条件
  if (customerListSys.value.length < res.total) {
    // 页码累加
    queryParamsSys.pageNum++
  } else {
    // 分页已结束
    isFinishSys.value = true
  }
}

const open = async () => {
  entryType.value = '1'
  show.value = true
}
const close = async (e) => {
  show.value = false
}
const opened = async (e) => {
  customerId.value = props.modelValue
  customerIdSys.value = props.modelValue
  await getCustomerData()
  await getSysCustomerData()
}
const changeCustomerSys = async (e: any) => {
  customerIdSys.value = e
  customerId.value = undefined
}
const changeCustomer = async (e: any) => {
  customerIdSys.value = undefined
  customerId.value = e
}

const submitForm = async () => {
  let customerRes = undefined
  let labels = ''
  if (customerId.value) {
    for (let i in customerList.value) {
      if (customerId.value.includes(customerList.value[i]!.customerId)) {
        customerRes = customerList.value[i]
        labels = labels ? labels + ',' + customerList.value[i]!.name : customerList.value[i]!.name
      }
    }
  }
  if (customerIdSys.value) {
    for (let i in customerListSys.value) {
      if (customerIdSys.value.includes(customerListSys.value[i]!.customerId)) {
        customerRes = customerListSys.value[i]
        labels = labels
          ? labels + ',' + customerListSys.value[i]!.name
          : customerListSys.value[i]!.name
      }
    }
  }
  emit('update:modelValue', customerRes?.customerId)
  emit('change', customerRes)
  emit('update:labels', labels)
  show.value = false
}

// 组件挂载完毕
onMounted(() => {})
// 暴露
defineExpose({
  open,
})
</script>

<style lang="scss">
.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0;
}
</style>
